<template>
  <div class="mine">
    <!-- 背景  -->
    <div class="bg"></div>
    <!-- 用户个人信息 -->
    <div class="user">
      <div class="photo">
        <!-- 用户头像 -->
        <img :src="userInfo.userFace" alt="" />
      </div>
      <!-- 用户名 -->
      <p class="name">{{ userInfo.username }}</p>
      <p class="flag">立志成为老板最喜欢的打工人</p>
      <!-- nav导航栏 -->
      <div class="flex">
        <div class="flex_item">
          <p>已完成</p>
          <p>123</p>
        </div>
        <div class="flex_item">
          <p>待服务</p>
          <p>2</p>
        </div>
        <div class="flex_item">
          <p>已支付</p>
          <p>110</p>
        </div>
        <div class="flex_item">
          <p>余额</p>
          <p>{{userInfo.balance}}</p>
        </div>
      </div>
    </div>
    <!-- 菜单栏 -->
    <div class="cell">
      <div class="cell_item" @click="toCert">
        实名认证<span style="float: right; font-size: 20px">&gt;</span>
      </div>
      <div class="cell_item" @click="toAccount">
        提现<span style="float: right; font-size: 20px">&gt;</span>
      </div>
      <div class="cell_item" @click="toIncome">
        收益信息<span style="float: right; font-size: 20px">&gt;</span>
      </div>
      <div class="cell_item" @click="toMineinfo">
        个人信息<span style="float: right; font-size: 20px">&gt;</span>
      </div>
    </div>
    <!-- 退出登录 -->
    <div class="logout_btn" @click="tologinout">退出登录</div>
    <!-- 弹出对话框 -->
    <van-dialog :beforeClose="Change" v-model="show" title="提现" show-cancel-button>
    <van-field v-model="money" label="金额" placeholder="请输入金额" type="number" />
   </van-dialog>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import { Toast } from 'vant';
import { post } from '@/http/axios'
export default {
  data() {
    return {
    //对话框弹出
    show: false,
    //提现金额数
    money:'',
    id:''
    };
  },

  methods: {
    ...mapMutations("user", ["delToken"]),

    // 跳转到实名认证
    toCert() {
      this.$router.push("/cert");
    },

    // 点击弹出提现框
    toAccount() {
      this.show=true
     
    },
    // 提现事件
    async Change(action,done){
        if(action=='confirm'){
            let data={
                money:this.money,
                applyType:'提现',
                userId:this.userInfo.id
            }
            let res = await post('/accountApply/submitAccountApply',data)
            // 清空金额输入框操作
            this.money=''
            if (res.data.status==200) {
                Toast(res.data.message);
            } else {
                Toast(res.data.message);
            }
            
            return done()
        }
        else if(action=='cancel'){
            // 清空金额输入框操作
             this.money=''
             return done()
        }
    },

    // 跳转到收益
    toIncome() {
      this.$router.push("/manager/help");
    },

    //跳转到个人信息
    toMineinfo() {
      this.$router.push("/mineinfo");
    },

    // 退出登录
    tologinout() {
      this.delToken();

      this.$router.push("/login");
    },
  },
  computed: {
    //通过vuex 拿到登录保存的用户信息
    ...mapState("user", ["userInfo"]),

    ...mapState("user", ["token"]),
  },


  created() {},
};
</script>

<style scoped>
.bg {
  height: 180px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.user {
  width: 80%;
  height: 170px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  padding: 0 1em;
}
.user .photo img {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-color: #bf73ff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.user .name {
  width: 50%;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 3.5em;
  text-align: center;
}
.user .flag {
  width: 50%;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 0.5em;
  text-align: center;
  font-size: 12px;
  color: #7579ff;
}
.user .flex {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
}
.user .flex .flex_item {
  width: 24%;
  height: 40px;
  text-align: center;
  cursor: pointer;
}
.user .flex .flex_item p:first-child {
  font-size: 11px;
  color: #999;
}
.user .flex .flex_item p:last-child {
  font-size: 22px;
  margin-top: 2px;
  color: #7579ff;
}
.user .flex .flex_item p {
  text-align: center;
  cursor: pointer;
  margin: 0;
}

.cell {
  margin-top: 116px;
  padding: 0.5em 2em;
}
.cell .cell_item {
  border-bottom: 1px solid #f9f6f6;
  padding: 1em 0;
  color: #999;
  font-size: 14px;
  cursor: pointer;
}
.logout_btn {
  width: 53%;
  height: 40px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  text-align: center;
  color: #fff;
  border-radius: 22px;
  line-height: 40px;
  margin: 0 auto;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-top: 2em;
  cursor: pointer;
  margin-bottom: 5em;
}
</style>